<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索结果</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon" />
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />
		<style>
			.card-img-overlay {
				color: transparent;
				top: auto;
			}
		
			.card-img-overlay:hover {
				background-color: white;
				color: gray;
			}
			.card-img-top {
				width: 100%;
				height: 280px;
			}
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="header"></div>
		<!-- 搜索结果 -->
		<!-- 卡片 -->
		<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 ml-5 mr-5" data-role="listview" id="content" style="margin-top:100px;margin-bottom: 104px;"></div>
		<div class="text-center p-5 mt-5" id="result" style="margin-bottom:286px;"></div>
		<!-- 页脚 -->
		<div class="mt-5" id="footer"></div>
	</body>
	<!-- js -->
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>
	<!-- 模板 -->
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<div class="col mb-4">
			<a href="details?office=${m_link}?id=${m_id}" class="text-decoration-none"><div class="card">
				<img src="${m_src}" class="card-img-top" alt="${m_name}">
				<div class="card-img-overlay">
					<h5 class="card-title text-truncate">${m_name}</h5>
					<div class="card-text text-truncate">类型: ${m_type}</div>
					<div class="card-text text-truncate">主演: ${m_actors}</div>
					<div class="card-text text-truncate">上映时间: ${m_time}</div>
				</div>
			</div>
			<div class="text-center text-black-50 font-weight-bold mt-2">${m_name}</div></a>
		</div>
	</script>
	<script>
		$('#header').load('header');
		$('#footer').load('footer');
		var str = window.location.href;
		let list = str.split('=');
		b = decodeURI(list[1]);
		console.log(b);
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/movie",
			dataType: "json",
			data: {
				name: b
			},
			success: function(data) {
				console.log(data);
				if(data[0]==null){
					$("#result").html("<h3>无搜索结果!</h3><h4>请尝试输入完整影名搜索!!</h4><h5>没有则是暂未收录，请反馈客服，我们会加快获取资源!!!</h5>");
					$(".row").remove();
				}else{
					$("#result").remove();
					// 将json对象载入模板,并插入到#lists末尾中去
					$('#myTemplate').tmpl(data).appendTo('#content');
				}
			},
			error: function() {
				alert('连接超时！');
			},
		});
	</script>
</html>
